Astroで作成したWebサイトをAWS Amplify ホスティングにサクッとデプロイしてみた
こんにちは！コンサル部のinomaso(@inomasosan)です。
前回Astroでローカル環境にWebサイトを構築したので、今回はAWS Amplifyでのデプロイを試してみました。
デプロイ先について
Astroの公式ドキュメントにはNetlifyやVercelといった様々なデプロイ先のガイドがあります。
今回は使ったことのないAWS Amplifyにデプロイしてみることしました。
ガイドにはAWS Amplify以外にも、S3静的WebサイトホスティングやCloudFrontとS3を組み合わせた手順が載っているので、機会があれば試してみようと思います。
やってみた
デプロイするWebサイト作成
前回はサンプル用テンプレートでWebサイトのプロジェクトを作成しましたが、今回はシンプルにするためにテンプレートはEmptyを選択して再作成しています。
トップページにAstroと表示されるだけのシンプルなWebサイトとなります。
GitHubの準備
AmplifyはGitHubなどのリポジトリをソースにビルド、ホスティングを行います。
今回はGitHubをソースにするため、まずはGitHubに空のリポジトリを作成します。
GitHubのリポジトリ作成が完了したら、以下のコマンドでプロジェクトのファイルをPushします。
プロジェクト作成時にgit initは実施しているため、mainブランチを作成から実施しています。
git branch -M main
git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
git push -u origin main
Amolifyホスティングを作成
デプロイ先のAmplifyホスティングを準備していきます。 Amplifyコンソールを開き使用を開始するをクリックします。
下の方にスクロールするので、Amplifyホスティングの方の使用を開始するをクリックします。
ソースコード先を聞かれるので、今回はGitHubを選択し続行をクリックします。
GitHub Apps機能を使用してAmplifyアクセスを承認していきます。
最近更新されたリポジトリに該当のリポジトリが表示されない場合は、GitHubのアクセス許可を表示をクリックします。
Amplify GitHubアプリのインストール先アカウントを選択します。
今回はインストールを該当のリポジトリのみとしたいためOnly select repositoriesを選択します。
Amplifyの画面に戻ってきたら、今回ソースに指定したいリポジトリが選択できていることを確認します。
ビルドの設定はAstroの公式ガイドに記載されているコードに変更します。
確認が表示されたら、リポジトリ等に問題ないことを確認し保存してデプロイをクリックします。
プロビジョンが開始されるので、デプロイまで完了するのを待ちます。
デプロイまで完了したら左下のURLをクリックし、Webページが表示されるかを確認します。
ローカルと同じ画面が表示できることまで確認できました。
AmplifyのCI/CDを試してみる
せっかくAmplifyで構築したので、一部のファイルを変更しGitHubにPushした場合にWebサイトが更新されるかを試してみます。
今回はトップページの表示をAstroからHelloするためにindex.astroを変更していきます。
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
変更したファイルをGitHubのリポジトリにPushします。
git add . git commit -m "index modify" git push -u origin main
変更を検知してプロビジョンが開始されたので、デプロイまで完了するのを数分待ちます。
デプロイまで完了したら、変更内容が反映されていることを確認します。
Helloに変更されたことを確認できました。
参考
まとめ
Astroの公式ドキュメント通りに進めることで、AWS Amplifyのデプロイをサクッと試すことができました。 AWS Amplifyはビルド・デプロイなどのCI/CDパイプラインを構築する必要がなくなるので、簡単に構築することができました。
この記事が、どなたかのお役に立てば幸いです。それでは！
